<div class="container">

    <h2 class="mt-4"><%= gettext("Our Users") %></h2>
    <div class="row layout-top-spacing">
        <%= for user <- @users do %>

        <div class="col-md-2 mb-4">
            <%= live_redirect to: Routes.user_profile_path(@socket, :index, user.username) do %>
            <div class="card">
                <div class="card-body">
                    <div class="text-md-center">
                        <h4><%= user.displayname %></h2>
                        <img src="<%= Glimesh.Avatar.url({user.avatar, user}, :original) %>"
                            alt="Your Profile Picture"
                            style="width: 80% !important;"
                            class="img-fluid mb-2 img-avatar <%= if user.stripe_user_id, do: "img-verified-streamer", else: "" %>">

                        <%= if user.stripe_user_id do %>
                        <div class="mb-4"><span class="badge badge-secondary"><%= gettext("Sub Ready!") %></span></div>
                        <% end %>
                    </div>
                </div>
            </div>
            <% end %>
        </div>

        <% end %>
    </div>
</div>
